<template>
    <div id="MyMap">
        <BackHeader :header="Header"></BackHeader>
        <div class="amap-wrapper">
            <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
             <div class="toolbar">
                <i class="iconfont icon-dingwei"></i><span v-if="loaded">
                {{address}}
                </span>
                <span v-else>正在定位</span>
            </div>
             <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center" :events="events">
               <el-amap-marker vid="marker"
                :position="center"
                :label="address"
                >
                </el-amap-marker>
            </el-amap>
            
        </div>
    </div>
</template>
<script>
import BackHeader from '../../components/Header/BackHeader.vue';
import { MessageBox } from 'mint-ui';
export default {
    name:'MyMap',
    components:{
		  BackHeader,
	  },
   data() {
        let self = this;
        return {
          Header:'定位',
          searchOption: {
            city: '',
            citylimit: false
          },
          address:'',
          Position:'',
          center: [121.59996, 31.197646],
          lng: 0,
          lat: 0,
          loaded: false,
          events: {
            click(e) {
              let { lng, lat } = e.lnglat;
              self.lng = lng;
              self.lat = lat;
              self.center = [self.lng, self.lat];
              // 这里通过高德 SDK 完成。
              var geocoder = new AMap.Geocoder({
                radius: 1000,
                extensions: "all"
              });        
              geocoder.getAddress([lng ,lat], function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                  if (result && result.regeocode) {
                    self.address = result.regeocode.formattedAddress;
                    self.Position = result.regeocode.addressComponent.city+result.regeocode.addressComponent.district;
                    self.$store.dispatch('showMap', self.Position);
                    // MessageBox.alert(self.Position,'指定位置');
                    self.$nextTick();
                  }
                }
              });        
            }
          },
          plugin: [
            {
              pName: 'Geolocation',
              showMarker: false,
              events: {
                init(o){
                  // o 是高德地图定位插件实例
                  o.getCurrentPosition((status, result) => {
                    if (result && result.position) {
                      self.lng = result.position.lng;
                      self.lat = result.position.lat;
                      self.center = [self.lng, self.lat];
                      self.address = result.formattedAddress;
                      self.Position = result.addressComponent.city+result.addressComponent.district;
                      self.$store.dispatch('showMap', self.Position);
                      MessageBox.alert(self.Position,'当前位置');
                      self.loaded = true;
                      self.$nextTick();
                    }else{
                      MessageBox.alert('获取当前位置失败!','提示');
                    }
                  });
                }
              }
            },
            {
              pName: 'ToolBar',
            }
          ]
        };
    },
    mounted: function() {
       
    },
    methods:{
    //位置搜索
     onSearchResult(pois) {
        let self = this;
        let latSum = 0;
        let lngSum = 0;
        if (pois.length > 0) {
          pois.forEach(poi => {
            let {lng, lat} = poi;
            lngSum += lng;
            latSum += lat;
          });
          let center = {
            lng: lngSum / pois.length,
            lat: latSum / pois.length
          };
          self.center = [center.lng, center.lat];
          var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all"
          });        
          geocoder.getAddress([center.lng,center.lat], function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
              if (result && result.regeocode) {
                self.address = result.regeocode.formattedAddress;
                self.Position = result.regeocode.addressComponent.city+result.regeocode.addressComponent.district;
                self.$store.dispatch('showMap', self.Position);
                MessageBox.alert(self.Position,'指定位置');
                self.$nextTick();
              }
            }
          });    
        }
      }
    },
    
}
</script>

<style lang="scss" scoped>
.amap-wrapper {
  margin-top: 45px;
  width: 100%;
  height: 460px;
}
@media screen and (max-width: 330px) { 
  .amap-wrapper {height: 360px !important;}
}
.toolbar{
  padding: 5px;
}
.search-box{
  margin: 0px auto;
  width: 100%;
  height: 35px;
}
</style>

